<template>
	<view class="success-container">
		<!-- 状态栏占位 -->
		<view class="status-bar"></view>
		
		<!-- 顶部导航栏 -->
		<view class="navbar">
			<text class="page-title">发布成功</text>
		</view>
		
		<!-- 成功内容 -->
		<view class="success-content">
			<!-- 成功图标 -->
			<view class="success-icon-wrapper">
				<image class="success-icon" src="/static/icons/check-circle.png"></image>
			</view>
			
			<!-- 成功信息 -->
			<text class="success-title">招标发布成功！</text>
			<text class="success-desc">您的招标信息已成功发布，我们会将您的招标信息推送给符合条件的服务商。</text>
			
			<!-- 项目信息 -->
			<view class="project-card">
				<text class="project-title">工业用高精度机器人和自动化生产线设备采购项目</text>
				<view class="project-info">
					<view class="info-item">
						<text class="info-label">招标类别</text>
						<text class="info-value">设备采购</text>
					</view>
					<view class="info-item">
						<text class="info-label">项目预算</text>
						<text class="info-value">¥100-150万</text>
					</view>
					<view class="info-item">
						<text class="info-label">截止日期</text>
						<text class="info-value">2025-06-30</text>
					</view>
					<view class="info-item">
						<text class="info-label">招标编号</text>
						<text class="info-value">{{ bidNumber }}</text>
					</view>
				</view>
			</view>
			
			<!-- 提示信息 -->
			<view class="tips-box">
				<view class="tip-item">
					<image class="tip-icon" src="/static/icons/notification.png"></image>
					<text class="tip-text">您可以在"我的发布"中查看招标详情和投标情况</text>
				</view>
				<view class="tip-item">
					<image class="tip-icon" src="/static/icons/time.png"></image>
					<text class="tip-text">招标截止前，您可以随时修改招标信息</text>
				</view>
			</view>
		</view>
		
		<!-- 底部按钮 -->
		<view class="bottom-actions">
			<button class="action-btn secondary-btn" @tap="goBidList">查看我的发布</button>
			<button class="action-btn primary-btn" @tap="goHome">返回首页</button>
		</view>
	</view>
</template>

<script setup>
import { ref, onMounted } from 'vue';

const bidNumber = ref('');

onMounted(() => {
	// 生成随机的招标编号
	generateBidNumber();
});

const generateBidNumber = () => {
	// 使用时间戳和随机数生成招标编号
	const timestamp = Date.now().toString().substring(3, 10);
	const random = Math.floor(Math.random() * 1000).toString().padStart(3, '0');
	bidNumber.value = `ZB${timestamp}${random}`;
};

const goBidList = () => {
	// 跳转到我的发布列表页面
	uni.redirectTo({
		url: '/pages/profile/my-publish'
	});
};

const goHome = () => {
	// 返回首页
	uni.switchTab({
		url: '/pages/index/index'
	});
};
</script>

<style>
.success-container {
	min-height: 100vh;
	background-color: #f5f7fa;
	display: flex;
	flex-direction: column;
	position: relative;
}

.status-bar {
	height: var(--status-bar-height);
	width: 100%;
	background-color: #fff;
}

.navbar {
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0 30rpx;
	height: 100rpx;
	background-color: #fff;
	border-bottom: 1px solid #f0f0f0;
}

.page-title {
	font-size: 36rpx;
	font-weight: 600;
	color: #333;
}

.success-content {
	flex: 1;
	padding: 60rpx 40rpx;
	display: flex;
	flex-direction: column;
	align-items: center;
}

.success-icon-wrapper {
	width: 160rpx;
	height: 160rpx;
	background: rgba(34, 197, 94, 0.1);
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	margin-bottom: 40rpx;
}

.success-icon {
	width: 100rpx;
	height: 100rpx;
}

.success-title {
	font-size: 40rpx;
	font-weight: 600;
	color: #22c55e;
	margin-bottom: 20rpx;
}

.success-desc {
	font-size: 28rpx;
	color: #666;
	text-align: center;
	margin-bottom: 60rpx;
	line-height: 1.5;
}

.project-card {
	width: 100%;
	background-color: #fff;
	border-radius: 16rpx;
	padding: 40rpx 30rpx;
	box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.05);
	margin-bottom: 60rpx;
}

.project-title {
	font-size: 32rpx;
	font-weight: 600;
	color: #333;
	margin-bottom: 30rpx;
	line-height: 1.4;
}

.project-info {
	display: flex;
	flex-direction: column;
}

.info-item {
	display: flex;
	justify-content: space-between;
	margin-bottom: 20rpx;
}

.info-label {
	font-size: 28rpx;
	color: #666;
}

.info-value {
	font-size: 28rpx;
	color: #333;
	font-weight: 500;
}

.tips-box {
	width: 100%;
	background-color: #f0f9ff;
	border-radius: 16rpx;
	padding: 30rpx;
}

.tip-item {
	display: flex;
	align-items: flex-start;
	margin-bottom: 20rpx;
}

.tip-item:last-child {
	margin-bottom: 0;
}

.tip-icon {
	width: 40rpx;
	height: 40rpx;
	margin-right: 16rpx;
	flex-shrink: 0;
}

.tip-text {
	font-size: 26rpx;
	color: #666;
	line-height: 1.5;
}

.bottom-actions {
	padding: 40rpx;
	display: flex;
	justify-content: space-between;
	border-top: 1px solid #f0f0f0;
	background-color: #fff;
}

.action-btn {
	flex: 1;
	height: 88rpx;
	border-radius: 44rpx;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 30rpx;
	font-weight: 600;
}

.secondary-btn {
	background-color: #f3f4f6;
	color: #6b7280;
	margin-right: 20rpx;
}

.primary-btn {
	background-color: #1d4ed8;
	color: #fff;
}
</style> 